<template>
  <wd-tabbar v-model="activeTabber" @change="handleChange">
    <wd-tabbar-item
      v-for="item in tabBarList"
      :title="item.text"
      :icon="item.icon"
    ></wd-tabbar-item>
  </wd-tabbar>
</template>

<script lang="ts" setup>
import { getDynamicTabBar } from '@/utils/tabber'

const props = defineProps({
  pagePath: {
    type: String,
    default: '',
  },
})

const activeTabber = ref(1)
const tabBarList = getDynamicTabBar()

const handleChange = (data: { value: number }) => {
  if (tabBarList[data.value].pagePath === props.pagePath) {
    return
  }
  uni.switchTab({
    url: tabBarList[data.value].pagePath,
  })
}

onShow(() => {
  console.info(props.pagePath)
  activeTabber.value = tabBarList.findIndex((item) => item.pagePath === props.pagePath)
  console.info(activeTabber.value)
})
</script>

<style lang="scss"></style>
